<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  
  <title>数据可视化</title>

  <!-- Favicons -->

  <!--external css-->
  <link href="/static/lib/font-awesome/css/font-awesome.css" rel="stylesheet" />
 
  <link rel="stylesheet" type="text/css" href="/static/lib/gritter/css/jquery.gritter.css" />
  <!-- Custom styles for this template -->
  <link href="/static/css/style.css" rel="stylesheet">
  <link href="/static/css/style-responsive.css" rel="stylesheet">
    <script type="text/javascript" src="/static/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/static/js/echarts.min.js"></script>
  
  
</head>

<body>
  <section id="container1">
   
    <header class="header black-bg">
      <div class="sidebar-toggle-box">
        <div class="fa fa-bars tooltips" data-placement="right"  data-original-title="Toggle Navigation">
         
        </div>
      </div>
      <!--logo start-->
      <a href="index.html" class="logo"><b>BIG<span>DATA</span></b></a>
     <div class="top-menu">
      <ul class="nav pull-right top-menu">
        <li>
          <a class="login" href="/login">登录</a>
          <a class="register" href="/register">注册</a>
         
        </li>
      </ul>
    </div>
    </header>
   
    <aside>
      <div id="sidebar" class="nav-collapse ">
        <!-- sidebar menu start-->
        <ul class="sidebar-menu" id="nav-accordion">
          <p class="centered"><img src="/static/img/qidi.jpg" class="img-circle" width="80"></p>
          <h5 class="centered">还没想好小组</h5>
          <li class="mt">
            <a class="" href="/index">
              <i class="fa fa-dashboard"></i>
              <span>主页面</span>
              </a>
          </li>
         
          <li class="sub-menu">
            <a class="active" href="javascript:;">
              <i class="active" fa fa-bar-chart-o"></i>
              <span>Charts</span>
              </a>
             <ul class="sub">
        <!-- <li><a href="/">主页面</a></li> -->
              <li><a href="/location">地区分布</a></li>
              <li><a href="/users_count">用户数量统计</a></li>
              <li><a href="/relation">用户关系</a></li>
              <li><a href="/occupation">职业群体分布</a></li>
                <li><a href="/school">教育学校分布</a></li>
              <li><a href="/topic">话题分布</a></li>
              <li><a href="/gender">性别比例分布</a></li>
             
            </ul>
          </li>
         <li class="sub-menu">
            <a class="" href="javascript:;">
              <i class="active" fa fa-bar-chart-o"></i>
              <span>Person</span>
              </a>
             <ul class="sub">
     
              <li><a href="/persion">个人用户画像</a></li>
              </ul>
          </li>

          <li class="sub-menu">
            <a href="javascript:;">
              <i class="fa fa-book"></i>
              <span>其它</span>
              </a>
             <ul class="sub">
              <li><a href="/login">登录</a></li>
              <li><a href="/register">注册</a></li>
              <li><a href="404.html">404 Error</a></li>
              <li><a href="500.html">500 Error</a></li>
            </ul>
          </li>
          
        </ul>
        <!-- sidebar menu end-->
      </div>
    </aside>
    
    <!--main content start-->
    <section id="main-content">
      <section class="wrapper">
        <br>
        <br>
      <!--   折线统计图 -->
     <div id="users" style="width:100%; height: 500px;  "></div>  
     <!-- <script type="text/javascript" src="/static/js/jquery-3.3.1.min.js"></script> -->
     <!-- <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>    -->
     <script type="text/javascript" charset="UTF-8">
      //路径配置
     
      function loadColumn(){ 
          // 基于准备好的dom，初始化echarts实例
          var myChart = echarts.init(document.getElementById('users'));
          myChart.setOption({
              title:{
                 text: '2010年~2017年每个月的用户数量统计折线图',
                 // subtext:'数据来源：china_time_users_count',
                 x:'center',
                 y:'bottom',
              },
              tooltip: {
                 trigger: 'axis',
                 // axisPointer: {
                    // type: 'cross',
                    // label: {
                        // backgroundColor: '#6a7985'
                    // }
                  // }
              },
              legend: {
                // orient:'horizontal',
                // x:'left',
                // y:'top',
                data: ['2010年', '2011年', '2012年', '2013年', '2014年', '2015年', '2016年', '2017年']
              },
              toolbox: {
                show:true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                  }
              },
              grid: {
                top:'15%',
                left: '5%',
                right: '8%',
                bottom: '8%',
                containLabel: true
              },
              calculable:true,
              xAxis:{
                name:'月份',
                type: 'category',
                // boundaryGap:false,    
                // data: []
                 axisLine: {
                   lineStyle:{
                    color:'#87cefa'
                  }
                },
                axisLabel:{
                  interval:0,
                  // rotate:45,
                  textStyle:{
                    color:"black",
                    fontSize:20,
                    fontFamily: 'Microsoft YaHei'

                  }
                }
              },
              yAxis: {
                name:'用户数量',
                type: 'value',
                min :0,
                max:1400,
                splitNumber:30,
                axisLine: {
                   lineStyle:{
                    color:'#87cefa'
                  }
                 
                },
                splitLine : {show : false},
              },
              series: [
                {
                    name: '2010年',
                    type: 'line',
                    symbol: 'emptydiamond', 
                    data: []
                },
                {
                    name: '2011年',
                    type: 'line',
                    symbol: 'emptycircle', 
                    data: []
                },
                {
                    name: '2012年',
                    type: 'line',
                    symbol: 'emptyrect', 
                    data: []
                },
                {
                    name: '2013年',
                    type: 'line',
                    symbol: 'circle', 
                    data: []
                },
                {
                    name: '2014年',
                    type: 'line',
                    symbol: 'emptydiamond', 
                    data: []
                },
                {
                    name: '2015年',
                    type: 'line',
                    symbol: 'emptycircle', 
                    data: []
                },
                {
                    name: '2016年',
                    type: 'line',
                    symbol: 'emptyrect', 
                    data: []
                },

                {
                    name: '2017年',
                    type: 'line',
                    symbol: 'emptydiamond', 
                    data: []
                }]
            });
          myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
          var names = [];    //类别数组（实际用来盛放X轴坐标值）    
          var series1 = [];
          var series2 = [];
          var series3 = [];
          var series4 = [];
          var series5 = [];
          var series6 = [];
          var series7 = [];
          var series8 = [];
          $.ajax({
              type: 'get',
              url: 'static/json/china_time.txt',//请求数据的地址
              dataType: "json",        //返回数据形式为json
              success: function (result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象        
          $.each(result.yilingnian, function (index, item) {
                names.push(item.months);    //挨个取出类别并填入类别数组
                series1.push(item.count);
            });
            $.each(result.yiyinian, function (index, item) {
                // names.push(item.months);   
                series2.push(item.count);
            });
            $.each(result.yiernian, function (index, item) {
                // names.push(item.months);   
                series3.push(item.count);

            });
            $.each(result.yisannian, function (index, item) {
                // names.push(item.months);   
                series4.push(item.count);
            });
            $.each(result.yisinian, function (index, item) {
                // names.push(item.months);   
                series5.push(item.count);
            });
            $.each(result.yiwunian, function (index, item) {
                // names.push(item.months);   
                series6.push(item.count);
            });
            $.each(result.yiliunian, function (index, item) {
                // names.push(item.months);   
                series7.push(item.count);
            });
            $.each(result.yiqinian, function (index, item) {
                // names.push(item.months);   
                series8.push(item.count);
            });
            myChart.hideLoading();    //隐藏加载动画
            myChart.setOption({        //加载数据图表
                xAxis: {
                    data: names
                },
                series: [{                    
                    data: series1
                },
                {
                    data: series2
                },
                {                    
                    data: series3
                },
                {                    
                    data: series4
                },
                {                    
                    data: series5
                },
                {                    
                    data: series6
                },
                {                    
                    data: series7
                },
                {                    
                    data: series8
                }
                ]
            });
        },
        error: function (xhr,state,errorThrown) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            alert(xhr);
            alert(state);
            alert(errorThrown);

            myChart.hideLoading();
        }
    });
  };
loadColumn();
</script>
<br>
<br>
    </section>
    </section>
    <!--main content end-->
    <!--footer start-->
    <footer class="site-footer">
      <div class="text-center">
        <p align="center">
          &copy;<strong>Big data</strong>&nbsp;&nbsp;.&nbsp;&nbsp;还没想好小组
        </p>
       
        <a href="/users_count" class="go-top">
          <i class="fa fa-angle-up"></i>
          </a>
      </div>
    </footer>
    <!--footer end-->
  </section>
  <!-- js placed at the end of the document so the pages load faster -->
 

  <script src="/static/lib/bootstrap/js/bootstrap.min.js"></script>
  <script class="include" type="text/javascript" src="/static/lib/jquery.dcjqaccordion.2.7.js"></script>
  <script src="/static/lib/jquery.scrollTo.min.js"></script>
  <script src="/static/lib/jquery.nicescroll.js" type="text/javascript"></script>
  <!-- <script src="/static/lib/jquery.sparkline.js"></script> -->
  <!--common script for all pages-->
  <script src="/static/lib/common-scripts.js"></script>
  <script type="text/javascript" src="/static/lib/gritter/js/jquery.gritter.js"></script>
  <script type="text/javascript" src="/static/lib/gritter-conf.js"></script>
  <!--script for this page-->
 

 
 
</body>

</html>
